		<script src="<?php echo(JS);?>jquery.js" type="text/javascript"></script>
    	<script src="<?php echo(JS);?>jeasyui.js" type="text/javascript"></script>
    	<script src="<?php echo(JS);?>funciones.js" type="text/javascript"></script>
    	<script src="<?php echo(JS);?>menus_portada.js" type="text/javascript"></script>
    	<script src="<?php echo(JS);?>tablas.js" type="text/javascript"></script>
    	


<div id="map" >
	<div class="clickable" id="1.1">
		<img class="casa" src="<?php echo(IMG.'casa.png');?>" >
		<p>This is a paragraph.</p>
		<span class="display"></span>
	</div>
</div>    	

<style>
<!--
.clickable {
    border: 1px solid #333;
    height: 350px; width: 350px;
    float:left;
    position: relative;
}
.display {
    height: 16px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%; margin-top: -8px;
}
-->
</style>

<script>
	$( document ).ready(function() {
		$(".clickable").bind('click', function (ev) {
		    var $div = $(ev.target);
		    var $display = $div.find('.display'); //encuentra la posicion del div
		    //var offset = $div.offset();
		    newPos=new Object();

		    //var x = ev.clientX - offset.left;
		    //var y = ev.clientY - offset.top;
		    
		    $.post(urlbase+"test/info", function(data) {
		    	var info = jQuery.parseJSON(data);
		    	
			    $.each(info.casa, function() {
			    	newPos.left = info.casa.x;
				    newPos.top = info.casa.y;
			    });

			    $(".casa").offset(newPos);
		    });
		    //$display.text($(this).attr('id')+' x: ' + x + ', y: ' + y);
		    //$display.text($(this).attr('id')+' x: ' + x + ', y: ' + y);
		});

		$(".casa").click(function() {
			alert('casa');
		});

		
	});

	


</script>